<template>
	<view class="Poster">
		<u-toast ref="uToast"></u-toast>
		<u-navbar title="邀请海报" :placeholder="true" :auto-back="true" bg-color="#F6F8FA"></u-navbar>
		<view class="record_box">
			<view class="flex_box flex_row_between flex_wrap record_main">
				<view @click="posterCreate(index)" v-for="(item,index) in list" :key="index" class="record_item">
					<u-image width="100%" height="608rpx" mode="aspectFill" radius="12rpx" :src="item.bg_image_url"></u-image>
				</view>
			</view>
			<view v-if="listStatus==='nomore'&&list.length===0" class="empty_box">
				<u-empty mode="data" icon="/static/empty/data.png" text="亲，暂无海报列表哦！"></u-empty>
			</view>
		</view>
		<u-popup bgColor="transparent" :show="shareShow">
			<view class="flex_box flex_row_center share_img">
				<image class="share_img_content" :show-menu-by-longpress="true" mode="aspectFill" :src="poster"></image>
			</view>
			<view class="share_btn">
				<view class="flex_box flex_row_around share_btn_content">
					<!-- #ifdef MP-WEIXIN -->
					<button open-type="share" class="u-reset-button flex_box flex_row_center flex_direction share_btn_item">
						<u-image width="60rpx" height="60rpx" shape="circle" src="/static/wechat.png"></u-image>
						<view class="share_btn_text">微信好友</view>
					</button>
					<!-- <button open-type="share" class="u-reset-button flex_box flex_row_center flex_direction share_btn_item">
						<u-image width="60rpx" height="60rpx" shape="circle" src="/static/friend.png"></u-image>
						<view class="share_btn_text">朋友圈</view>
					</button> -->
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<view @click="shareFriend" class="flex_box flex_row_center flex_direction share_btn_item">
						<u-image width="60rpx" height="60rpx" shape="circle" src="/static/wechat.png"></u-image>
						<view class="share_btn_text">微信好友</view>
					</view>
					<view @click="shareTime" class="flex_box flex_row_center flex_direction share_btn_item">
						<u-image width="60rpx" height="60rpx" shape="circle" src="/static/friend.png"></u-image>
						<view class="share_btn_text">朋友圈</view>
					</view>
					<!-- #endif -->
					<view @click="shareSave" class="flex_box flex_row_center flex_direction share_btn_item">
						<u-image width="60rpx" height="60rpx" shape="circle" src="/static/save.png"></u-image>
						<view class="share_btn_text">保存海报</view>
					</view>
				</view>
				<u-button throttleTime="1000" @click="shareShow=false" color="transparent" :custom-style="btnStyle" text="取消"></u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		posterList,
		posterCreate
	} from '@/common/http.api.js';
	let that;
	export default {
		data() {
			return {
				list: [],
				listStatus: "loading",
				shareShow: false,
				btnStyle: {
					height: '116rpx',
					color: '#ffffff',
				},
				posterIndex: 0,
				poster: ''
			}
		},
		onLoad(options) {
			that = this;
			that.getList();
		},
		onReachBottom() {
			that.getMore();
		},
		methods: {
			// 获取列表
			getList(){
				posterList().then(res => {
					that.list = res.data;
					that.listStatus = "nomore"
				}).catch(err => {
					uni.$u.toast(err.msg);
				});
			},
			// 生成海报
			posterCreate(e){
				that.posterIndex = e;
				posterCreate({params: {poster_id: that.list[that.posterIndex].id}}).then(res => {
					that.poster = res.data;
					that.shareShow = true
				}).catch(err => {
					uni.$u.toast(err.msg);
				});
			},
			// app分享到微信
			shareFriend(){
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 2,
					imageUrl: that.poster,
					success: function (res) {
						that.$refs.uToast.show({
							type: 'success',
							title: '分享成功'
						});
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			// app分享到朋友圈
			shareTime(){
				uni.share({
					provider: "weixin",
					scene: "WXSceneTimeline",
					type: 2,
					imageUrl: that.poster,
					success: function (res) {
						that.$refs.uToast.show({
							type: 'success',
							title: '分享成功'
						});
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			// 保存海报
			shareSave(){
				uni.showLoading({
					title: '海报保存中',
					mask: !0
				});
				uni.getImageInfo({
					src: that.poster,
					success(resl) {
						uni.saveImageToPhotosAlbum({
							filePath: resl.path,
							success(res) {
								uni.hideLoading(), that.$refs.uToast.show({
									type: 'success',
									title: '保存成功'
								});
							},
							fail(res) {
								uni.hideLoading(), that.$refs.uToast.show({
									type: 'error',
									title: '保存失败，请重试'
								});
							}
						});
					},
					fail(resl) {
						uni.hideLoading(), that.$refs.uToast.show({
							type: 'error',
							title: '保存失败，请重试'
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.Poster{
		min-height: 100vh;
		background-color: #F6F8FA;
		.record_box{
			padding: 36rpx;
			.record_main{
				.record_item{
					width: 328rpx;
					margin-bottom: 24rpx;
				}
			}
		}
		.share_btn{
			background-color: #323232;
			border-radius: 36rpx 36rpx 0 0;
			padding: 0 24rpx;
			.share_btn_content{
				border-bottom: 2rpx solid rgba(255,255,255,0.2);
				height: 164rpx;
				.share_btn_item{
					margin: 0;
					width: 234rpx;
					.share_btn_text{
						font-size: 24rpx;
						color: #ffffff;
						line-height: 24rpx;
						padding-top: 16rpx;
					}
				}
			}
		}
		.share_img{
			height: calc(100vh - 40px - 282rpx);
			padding: 0 0 60rpx;
			.share_img_content{
				width: 604rpx;
				height: 100%;
				border-radius: 24rpx;
			}
		}
	}
</style>
